<template>
  <div>
    <h1>{{message}}</h1>
    <button @click="reverseFn">翻转世界</button>
  </div>
</template>

<script>
/**
 * 实现步骤
 * 1、先静态布局
 *  1-1、声明变量message
 *  1-2、把message渲染到h1标签上并准备button按钮
 * 2、实现功能
 *  2-1、绑定点击事件并声明事件处理函数
 *  2-2、在函数中将字符串切割为数组
 *  2-3、把数组颠倒顺序
 *  2-4、把数组拼接为字符串，赋值给message
 * 
 * */ 
export default {
  data(){
    return {
      message: "hello world"
    }
  },
  methods: {
    reverseFn(){
      // 实现功能
      // 1、将字符串切成数组
      // let arr = this.message.split("");
      // // 2、颠倒数组顺序
      // arr.reverse();
      // // console.log(22,arr);
      // // 3、拼接数组重复赋值给message
      // this.message = arr.join("");

      // 简写
      this.message = this.message.split("").reverse().join("");
    }
  }
}
</script>

<style>

</style>